<template>
  <div class="settings-container">
    <h1>模型设置</h1>
    
    <div class="models-list">
      <div v-for="model in models" :key="model.id" class="model-item">
        <div class="model-info">
          <div class="model-header">
            <h3>{{ model.name }}</h3>
            <span v-if="model.isDefault" class="default-badge">默认</span>
          </div>
          <p class="api-url">API地址：{{ model.baseUrl }}</p>
        </div>
        <div class="model-actions">
          <button @click="editModel(model)" class="edit">
            <span class="icon">✏️</span>
            编辑
          </button>
          <button 
            v-if="!model.isDefault" 
            @click="setAsDefault(model)"
            class="default"
          >
            <span class="icon">⭐️</span>
            设为默认
          </button>
          <button 
            @click="deleteModel(model.id)" 
            class="delete"
            :disabled="model.isDefault"
          >
            <span class="icon">🗑️</span>
            删除
          </button>
        </div>
      </div>

      <div v-if="models.length === 0" class="empty-state">
        <div class="empty-icon">🤖</div>
        <p>还没有添加任何模型</p>
      </div>
    </div>

    <button @click="showAddModal = true" class="add-btn">
      <span class="icon">➕</span>
      添加模型
    </button>

    <div v-if="showAddModal" class="modal">
      <div class="modal-content">
        <div class="modal-header">
          <h2>{{ editingModel ? '编辑模型' : '添加模型' }}</h2>
          <button @click="showAddModal = false" class="close-btn">✕</button>
        </div>
        <form @submit.prevent="handleSubmit">
          <div class="form-item">
            <label>显示名称：</label>
            <input 
              v-model="formData.name" 
              required 
              placeholder="为这个模型起个名字，如：我的 GPT-3.5" 
            />
          </div>
          <div class="form-item">
            <label>模型名称：</label>
            <input 
              v-model="formData.model" 
              required 
              placeholder="输入模型标识符，如：gpt-3.5-turbo"
            />
            <div class="help-text">常用模型：gpt-3.5-turbo、gpt-4 等</div>
          </div>
          <div class="form-item">
            <label>API类型：</label>
            <select v-model="formData.baseUrlType" required @change="handleBaseUrlChange">
              <option value="">请选择API类型</option>
              <option v-for="opt in MODEL_OPTIONS" :key="opt.value" :value="opt.value">
                {{ opt.label }}
              </option>
            </select>
          </div>
          <div class="form-item" v-if="formData.baseUrlType === 'custom'">
            <label>自定义API地址：</label>
            <input 
              v-model="formData.baseUrl" 
              required 
              placeholder="请输入完整的API地址，如：http://your-api.com/v1"
            />
          </div>
          <div class="form-item">
            <label>API密钥：</label>
            <div class="api-key-input">
              <input 
                :type="showApiKey ? 'text' : 'password'"
                v-model="formData.apiKey" 
                required 
                placeholder="输入API密钥" 
              />
              <button 
                type="button" 
                class="toggle-visibility" 
                @click="showApiKey = !showApiKey"
              >
                {{ showApiKey ? '👁️' : '👁️‍🗨️' }}
              </button>
            </div>
          </div>
          <div class="form-item checkbox">
            <label>
              <input type="checkbox" v-model="formData.isDefault">
              设为默认模型
            </label>
          </div>
          <div class="form-actions">
            <button type="button" @click="showAddModal = false" class="cancel">取消</button>
            <button type="submit" class="submit">确定</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import type { AIModel } from '@/types/model'
import { MODEL_OPTIONS } from '@/types/model'
import { modelStorage } from '@/utils/storage'

const models = ref<AIModel[]>([])
const showAddModal = ref(false)
const editingModel = ref<AIModel | null>(null)
const showApiKey = ref(false)
const formData = ref({
  name: '',
  model: '',
  baseUrlType: '',
  baseUrl: '',
  apiKey: '',
  isDefault: false
})

onMounted(() => {
  models.value = modelStorage.getModels()
})

const resetForm = () => {
  formData.value = {
    name: '',
    model: '',
    baseUrlType: '',
    baseUrl: '',
    apiKey: '',
    isDefault: false
  }
}

const handleBaseUrlChange = () => {
  if (formData.value.baseUrlType === 'custom') {
    formData.value.baseUrl = ''
  } else {
    formData.value.baseUrl = formData.value.baseUrlType
  }
}

const editModel = (model: AIModel) => {
  editingModel.value = model
  formData.value = {
    name: model.name,
    model: model.model,
    baseUrlType: MODEL_OPTIONS.some(opt => opt.value === model.baseUrl) 
      ? model.baseUrl 
      : 'custom',
    baseUrl: model.baseUrl,
    apiKey: model.apiKey,
    isDefault: model.isDefault || false
  }
  showAddModal.value = true
}

const deleteModel = (id: number) => {
  if (confirm('确定要删除这个模型吗？')) {
    modelStorage.deleteModel(id)
    models.value = modelStorage.getModels()
  }
}

const setAsDefault = (model: AIModel) => {
  modelStorage.setDefaultModel(model.id)
  models.value = modelStorage.getModels()
}

const handleSubmit = () => {
  const modelData = {
    name: formData.value.name,
    model: formData.value.model,
    baseUrl: formData.value.baseUrl,
    apiKey: formData.value.apiKey,
    isDefault: formData.value.isDefault
  }

  if (editingModel.value) {
    modelStorage.updateModel({
      ...modelData,
      id: editingModel.value.id
    })
    models.value = modelStorage.getModels()
    editingModel.value = null
  } else {
    const newModel = modelStorage.addModel(modelData)
    models.value.push(newModel)
  }
  showAddModal.value = false
  resetForm()
}
</script>

<style scoped>
.settings-container {
  padding: 2rem;
}

.models-list {
  margin: 2rem 0;
}

.model-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  margin-bottom: 1rem;
}

.add-btn {
  padding: 0.75rem 1.5rem;
  background: #2563eb;
  color: white;
  border: none;
  border-radius: 0.375rem;
  cursor: pointer;
}

.delete {
  background: #dc2626;
  margin-left: 0.5rem;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-content {
  background: white;
  padding: 2rem;
  border-radius: 0.5rem;
  width: 90%;
  max-width: 500px;
}

.form-item {
  margin: 1rem 0;
}

.form-item label {
  display: block;
  margin-bottom: 0.5rem;
}

.form-item input,
.form-item select {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.375rem;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  margin-top: 2rem;
}

.form-actions button {
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  cursor: pointer;
}

.form-actions button[type="button"] {
  background: #e5e7eb;
  border: none;
}

.form-actions button[type="submit"] {
  background: #2563eb;
  color: white;
  border: none;
}

.api-url {
  color: #666;
  font-size: 0.9em;
  word-break: break-all;
}

.model-header {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.default-badge {
  background: #10b981;
  color: white;
  padding: 0.25rem 0.75rem;
  border-radius: 1rem;
  font-size: 0.8rem;
  font-weight: 500;
}

.empty-state {
  text-align: center;
  padding: 3rem;
  color: #6b7280;
}

.empty-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.icon {
  margin-right: 0.5rem;
}

.api-key-input {
  position: relative;
  display: flex;
  align-items: center;
}

.toggle-visibility {
  position: absolute;
  right: 0.5rem;
  background: none;
  border: none;
  padding: 0.5rem;
  cursor: pointer;
  font-size: 1.2rem;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.close-btn {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: #6b7280;
  cursor: pointer;
  padding: 0.5rem;
}

.close-btn:hover {
  color: #374151;
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.model-actions {
  display: flex;
  gap: 0.75rem;
}

/* 编辑按钮 */
.edit {
  background: #f3f4f6;
  color: #374151;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  transition: all 0.2s;
}

.edit:hover {
  background: #e5e7eb;
}

/* 设为默认按钮 */
.default {
  background: #10b981;
  color: white;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  transition: all 0.2s;
}

.default:hover {
  background: #059669;
}

/* 删除按钮 */
.delete {
  background: #fee2e2;
  color: #dc2626;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  transition: all 0.2s;
}

.delete:hover:not(:disabled) {
  background: #fecaca;
}

.delete:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: #f3f4f6;
  color: #9ca3af;
}

/* 添加按钮 */
.add-btn {
  padding: 0.75rem 1.5rem;
  background: #2563eb;
  color: white;
  border: none;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  transition: all 0.2s;
  margin-top: 1.5rem;
}

.add-btn:hover {
  background: #1d4ed8;
}

/* 图标样式 */
.icon {
  font-size: 1.1rem;
  margin-right: 0.5rem;
  display: inline-flex;
  align-items: center;
}

/* 模型卡片样式优化 */
.model-item {
  background: white;
  padding: 1.25rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  margin-bottom: 1rem;
  transition: all 0.2s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.model-item:hover {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  border-color: #d1d5db;
}

.help-text {
  margin-top: 0.25rem;
  font-size: 0.875rem;
  color: #6b7280;
}

.form-item input {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  font-size: 0.95rem;
  transition: all 0.2s;
}

.form-item input:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.form-item.checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.form-item.checkbox label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  cursor: pointer;
  width: 100%;
}

.form-item.checkbox input[type="checkbox"] {
  width: auto;
  margin: 0;
  cursor: pointer;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .settings-container {
    padding: 1rem;
  }

  h1 {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
  }

  .model-item {
    padding: 1rem;
    margin-bottom: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .model-info {
    width: 100%;
  }

  .model-header {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .model-actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    width: 100%;
    padding-top: 0.5rem;
    border-top: 1px solid #e5e7eb;
  }

  .edit, .default, .delete {
    width: 100%;
    justify-content: center;
    padding: 0.625rem;
  }

  .icon {
    margin-right: 0.25rem;
  }

  /* 弹窗样式适配 */
  .modal-content {
    width: 95%;
    margin: 1rem;
    padding: 1rem;
  }

  .form-item {
    margin-bottom: 1rem;
  }

  .form-item label {
    font-size: 0.9rem;
  }

  .form-item input,
  .form-item select {
    padding: 0.625rem;
    font-size: 0.9rem;
  }

  .form-actions {
    gap: 0.5rem;
  }

  .form-actions button {
    flex: 1;
    padding: 0.625rem;
    font-size: 0.9rem;
  }

  .api-key-input {
    flex-direction: column;
    gap: 0.5rem;
  }

  .toggle-visibility {
    align-self: flex-end;
    margin-top: -2.5rem;
    margin-right: 0.5rem;
  }
}
</style> 